<template>
	<div>
		<router-link class="column-link" :to="toUrl" v-html="title" v-if="!isTarget"></router-link>
		<a class="column-link" :href="toUrl" target="_blank" v-else>{{title}}</a>
	</div>
</template>
<script>
	import ala from '@/service/ala'
	export default {
		data() {
			return {
				toUrl: '', // 跳转的url
				isTarget: false // 是否在新窗口打开
			}
		},
		props: {
			url: {
				default: null
			},
			value: {
				default: null
			},
			title: {
				default: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				let url = JSON.parse(JSON.stringify(this.url))
				// 先替换Id
				if (this.url.indexOf('[[Id') !== -1 || this.url.indexOf('[[id') !== -1) {
					url = url.replace('[[id]]', this.value['id'])
					url = url.replace('[[Id]]', this.value['id'])
				} else {
					if (url.indexOf('[[') < 0) {
						url = url + '?Id=[[id]]'
					}
				}
				if (url !== undefined && this.value !== undefined && url.indexOf('[[') !== -1) {
					var linkUrl = url.replace('[[', 'linkBegin')
					this.toUrl = linkUrl.match(/(\S*)linkBegin/)[1]
					linkUrl = linkUrl.replace(']]', 'linkEnd')
					var query = linkUrl.match(/linkBegin(\S*)linkEnd/)[1]
					var oldQuery = query
					if (query !== undefined && query !== null) {
						query = this.replaceStr(query)
						var queryValue = this.value[query]
						var replaceKey = '[[' + oldQuery + ']]'
						this.toUrl = url.replace(replaceKey, queryValue)
					}
				} else {
					this.toUrl = url
				}
				if (this.toUrl) {
					if (this.toUrl.indexOf('http') >= 0) {
						this.isTarget = true
					}
				}
			},
			// 首字母小写
			replaceStr(str) {
				var strTemp = '' // 新字符串
				for (var i = 0; i < str.length; i++) {
					if (i === 0) {
						strTemp += str[i].toLowerCase() // 第一个
						continue
					}
					if (str[i] === ' ' && i < str.length - 1) { // 空格后
						strTemp += ' '
						strTemp += str[i + 1].toLowerCase()
						i++
						continue
					}
					strTemp += str[i]
				}
				return strTemp
			}
		},
		watch: {
			value: {
				deep: true,
				handler: 'init'
			}
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss">
	.el-table td {
		padding: 10px 0 !important;

		.column-link,
		.column-link:visited,
		a:visited {
			text-decoration: none;
			color: #7b7e8a;
		}

		.column-link:hover,
		a:hover {
			color: #ad5beb;
		}
	}
</style>